<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>PetStore Management</title>
<!--    <link rel="Stylesheet" href="../css/jpetstore.css" type="text/css" media="screen"/>-->
    <script th:src="@{../js/jquery-3.5.1.min.js}"></script>
    <link rel="stylesheet" href="../css/register.css">
</head>
<style>

    *{
        padding: 0px;
        margin: 0px;
    }

    #Content {
        width: 100%;
        height: auto;
        color: #333;
        background-color: rgba(256,256,256,0.5);
        border-width: 0;
        position: relative;
        overflow: hidden;
    }
    table tr{
        height: 5ex;

    }
    table td{
        width: 20ex;
    }

    .Returnto{
        display: inline-block;
        float: left;
        position: absolute;
        top: 1ex;
        left: 2ex;
        height: 5ex;
        width: 50ex;
        background-image: url("../image/ReturntoManagementMainMenu.png");
        background-size: 100%;
        background-repeat: no-repeat;
        border-color: #eaac00;
        border-width: 0.4ex;
        border-style: solid;
    }
    table{
        display: block;
        /*position: absolute;*/
        /*top: 10ex;*/
        /*left: 10ex;*/
        width: 55ex;
        /*height: 60ex;*/
        font-size: 3ex;
        background-color: #ffffff;
        border-color: #56832c;
        border-width: 1ex;
        border-style: solid;
        /*margin-bottom: 10ex;*/
    }

    input {
        border-width: .15ex .15ex .15ex .15ex;
        border-style: solid;
        border-color: #eaac00;
        background-color: #ffffff;
        height: 2ex;
        font-size: 2ex;
        width: 20ex;
    }
    .button{
        border-width: .25ex .25ex .25ex .25ex;
        border-style: solid;
        border-color: #eaac00;
        display: inline-block;
        height: 5.5ex;
    }
    #edit{
        background-image: url("../image/EDIT.png");
        background-size: 100%;
        background-repeat: no-repeat;
        width: 12ex;
        margin-top: 2ex;
        margin-left: 14ex;
    }
    #save{
        background-image: url("../image/SAVE.png");
        background-size: 100%;
        background-repeat: no-repeat;
        width: 12ex;
        margin-top: 2ex;
        margin-left: 6ex;
    }
    #return{
        background-image: url("../image/RETURN.png");
        background-size: 100%;
        background-repeat: no-repeat;
        width: 15ex;
        margin-top: 2ex;
        margin-left: 6ex;
    }
    h3{
        float: left;
        position: absolute;
        top: 0ex;
        left: 34ex;
        font-size: 5ex;
    }
    #Catalog{
        display: block;
        margin-top: 3%;
        margin-left: 30%;
        width: 80ex;
        /*height: 80ex;*/
        font-size: 1.5ex;
        background-color:rgba(256,256,256,0);
        /*margin-bottom: 10ex;*/
    }
</style>
<body>
<div th:replace="manageCommon/managetop"></div>
<div id="Content">
    <a class="Returnto" href="/manage/main"></a>
    <div id="Catalog">
        <form action="" method="post" id="safe">
            <h3>User Safe Information</h3>

            <table>
                <tr>
                    <td>User ID:</td>
                    <td th:text="${session.safeAccount.username}">用户名</td>
                </tr>

                <tr>
                    <td>Email:</td>
                    <td>
                        <input style="width: 25ex;display: inline-block;float: left"type="text"name="email" id="email" th:value="${session.showEmail}" disabled="disabled" th:onblur="ispattern()"/>
                       <br/>
                         <span style="font-size:1px;line-height: 3ex;display: inline-block;float: left">  (可用：@前至少4位，只包含字母或数字 @qq.com @163.com @126.com @139.com @aliyun.com @csu.com)</span>
                    </td>
                </tr>
                <tr>
                    <td>Phone:</td>
                    <td><input style="width: 15ex"type="text" name="phone" th:value="${session.safeAccount.phone}" disabled="disabled"/></td>
                </tr>
                <tr id="pass" style="display: inline-block">
                    <td>Password:</td>
                    <td>
                        <input style="width: 15ex" id="showpassword" type="text" name="showpassword" th:onload="codeShow('[[${session.safeAccount.password}]]')" th:value="${session.showPassword}" disabled="disabled"/>
                    </td>
                </tr>
                <tr id="newpass" style="display: inline-block">
                    <td>New password:</td>
                    <td>
                        <input style="width: 15ex" id="password" type="text" name="password" th:onblur="isSafe()" value=""/>
                    </td>
                </tr>
                <tr  id="repeated" style="display: inline-block">
                    <td>Repeat password:</td>
                    <td>
                        <input style="width: 15ex"id="repeatedPassword" type="text" name="repeatedPassword" th:onblur="isreSafe()" value=""/>
                    </td>
                </tr>

            </table>
        </form>
        <input class="button" id="edit" type="button" style="display:inline-block;" th:onclick="revise('[[${session.safeAccount.email}]]')"/>
        <input class="button"id="save" type="button"  style="display:none;" th:onclick="save()" />
        <input class="button"id="return" type="button"  style="display:inline-block;"th:onclick="returnUserList()" />


        <script>
            var emailIsTrue = true;
            function undisabled(){
                var form = document.getElementById("safe");
                var input = form.getElementsByTagName("input");
                for(var i = 0 ;i <input.length;i++){
                    input[i].disabled = false;
                }
            }
            function indisabled(){
                var form = document.getElementById("safe");
                var input = form.getElementsByTagName("input");
                for(var i = 0 ;i <input.length;i++){
                    input[i].disabled = true;
                }
            }
            function isSafe(){
                if(document.getElementById("password").value===null||document.getElementById("password").value.length===0){
                    // $('#passwordTips').attr("class","invalid").text("密码不可为空");
                    window.alert("密码不可为空");
                }else if(document.getElementById("password").value.length <4){
                    // $('#passwordTips').attr("class","invalid").text("");
                    window.alert("密码长度至少为4位");
                }
            }
            function isreSafe(){
                if(document.getElementById("repeatedPassword").value === null){
                    // $('#repeatedPasswordTips').attr("class","invalid").text("请再次输入密码");
                    window.alert("请再次输入密码");
                }else if(document.getElementById("password").value !== document.getElementById("repeatedPassword").value){
                    // $('#repeatedPasswordTips').attr("class","invalid").text("密码输入不一致");
                    window.alert("密码输入不一致");
                }
            }
            function testEmailisWrong(string){
                var s = string.lastIndexOf('@');
                var str = string.slice(s,string.length);
                var prestr = string.slice(0,s);
                var isTrue = true;//@qq.com @163.com @126.com @139.com @aliyun.com @csu.com
                switch (str){
                    case "@qq.com":break;
                    case "@163.com":break;
                    case "@126.com":break;
                    case "@139.com":break;
                    case "@aliyun.com":break;
                    case "@csu.com":break;
                    default:isTrue = false;
                        break;
                }
                var regNumber = /\d+/;
                var regString = /[a-zA-Z]+/;
                if(isTrue){
                    if(s<3){
                        window.alert("邮箱帐户@前至少4位");
                        emailIsTrue = false;
                    } else{
                        if(regNumber.test(prestr)||regString.test(prestr)){
                            emailIsTrue = true;
                        }else{
                            window.alert("邮箱账户名只能包含字母或数字");
                            emailIsTrue = false;
                        }
                    }
                }else{
                    emailIsTrue = false;
                    window.alert("请输入正确格式：@qq.com @163.com @126.com @139.com @aliyun.com @csu.com");
                }
            }
            function ispattern(){
                var string1 = document.getElementById("email").value;
                testEmailisWrong(string1);
            }
            function revise(semail){
                console.log(semail);
                var st = semail.split('"');
                undisabled();
                document.getElementById("email").value=st[1];
                document.getElementById("pass").style.display = "none";
                document.getElementById("newpass").style.display = "inline-block";
                document.getElementById("repeated").style.display = "inline-block";
                document.getElementById("edit").style.display = "none";
                document.getElementById("save").style.display = "inline-block";
            }
            function save(){
                let datas = $('#safe').serialize();
                if(document.getElementById("password").value!==null&&document.getElementById("password").value.length!==0){
                    if(document.getElementById("password").value === document.getElementById("repeatedPassword").value){
                        if(emailIsTrue){
                            $.post('/manage/saveSafeInfo',datas,function (data) {
                                if(data.code===1){
                                    console.log("修改成功")
                                    document.getElementById("password").value = "";
                                    document.getElementById("repeatedPassword").value="";
                                    indisabled();
                                    var s = data.msg.split("#");
                                    document.getElementById("showpassword").setAttribute("value",s[0]);
                                    document.getElementById("email").value = s[1];
                                    document.getElementById("pass").style.display = "inline-block";
                                    document.getElementById("newpass").style.display = "none";
                                    document.getElementById("repeated").style.display = "none";
                                    document.getElementById("edit").style.display = "inline-block";
                                    document.getElementById("save").style.display = "none";
                                }
                            });
                        }else{
                            window.alert("邮箱格式不正确");
                        }
                    }else{
                        if(document.getElementById("repeatedPassword").value === null){
                            // $('#repeatedPasswordTips').attr("class","invalid").text("请再次输入密码");
                            window.alert("请再次输入密码");
                        }else{
                            // $('#repeatedPasswordTips').attr("class","invalid").text("密码输入不一致");
                            window.alert("密码输入不一致");
                        }
                    }
                }else{
                    // $('#passwordTips').attr("class","invalid").text("密码不可为空");
                    window.alert("密码不可为空");
                }
            }
            function returnUserList(){
                location.href = "/manage/usermanagement";
            }
        </script>
    </div>
</div>
<div th:replace="manageCommon/managebottom"></div>
</body>
</html>